<template>
  <div id="page">
    <a-form :model="formState" labelAlign="left" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }" autocomplete="off"
      @finish="onFinish" @finishFailed="onFinishFailed">
      <div class="page_header">
        <div class="search_props">
          <a-row>
            <a-col :span="8">
              <a-form-item label="用户名" name="user_name">
                <a-input v-model:value="formState.user_name" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="手机号" name="phone">
                <a-input v-model:value="formState.phone" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="手机号" name="地址">
                <a-input v-model:value="formState.addr" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="search_operate">
          <a-button type="primary" html-type="submit" style="margin-right:15px;">筛选</a-button>
          <a-button class="ant-btn-other">重置</a-button>
        </div>
      </div>
      <div class="header_operate">
        <a-button class="ant-btn-other" style="margin-right:15px;" @click="toCreate">
          <template #icon>
            <plus-outlined />
          </template>
          添加
        </a-button>
        <a-button class="ant-btn-other" style="margin-right:15px;">
          <template #icon>
            <import-outlined />
          </template>
          导入
        </a-button>
        <a-button class="ant-btn-other" style="margin-right:15px;">
          <template #icon>
            <export-outlined />
          </template>
          导出
        </a-button>
      </div>
    </a-form>
    <a-table :columns="columns" :rowKey="(r)=>r.id" :data-source="state.table_list" :pagination="state.pagination"
      @change="onTableChange">

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operat'">
          <div style="display: flex;flex-wrap: wrap;justify-content: center;">
            <a-button style="margin-left: 7px;margin-top: 2px;" size="small"
              @click="state.createVisible = !state.createVisible">编辑</a-button>
            <a-button style="margin-left: 7px;margin-top: 2px;" size="small" @click="showWindow('error')">查看报错
            </a-button>
            <a-button style="margin-left: 7px;margin-top: 2px;" size="small" @click="showWindow('warning')">查看警告
            </a-button>
            <a-button style="margin-left: 7px;margin-top: 2px;" size="small" @click="showWindow('info')">查看信息</a-button>
            <a-button style="margin-left: 7px;margin-top: 2px;" size="small" @click="showWindow('success')">查看成功
            </a-button>
          </div>
        </template>
      </template>
    </a-table>
    <Create v-if="state.createVisible" v-model:createVisible="state.createVisible" />
  </div>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { PlusOutlined, ExportOutlined, ImportOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { queryList } from '@/service/demoPage'
import Create from './create.vue';
import message from '@/utils/message'
const state = reactive({ //创建响应式数据
  table_list: [],
  pagination: {
    total: 20,	//数据总数
    pageSize: 10,//每页条数
    current: 1 //当前页数
  },
  createVisible: false,
  remember: true,
});
const formState = reactive({//创建响应式数据
  user_name: undefined,
  phone: undefined,
  addr: undefined
})
const columns = reactive([
  {
    title: '名称',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    show: true,
    align: 'center'
  },
  {
    title: '地址',
    dataIndex: 'address',
    show: true,
    align: 'center'
  },
  {
    title: '电话',
    dataIndex: 'phone',
    show: true,
    align: 'center'
  },
  {
    title: '职务',
    dataIndex: 'position',
    show: true,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operat',
    show: true,
    width: 200,
    align: 'center'
  },
]);

console.log("==父组件==", state.createVisible);
state.table_list = [...Array(10)].map((_, i) => ({
  id: i,
  name: `Edward King ${i}`,
  age: 32,
  address: `London, Park Lane no. ${i}`,
  phone: `1316368600${i}`,
  position: `逆风局局长${i}`
}));

const onTableChange = async (pagination) => {
  console.log(pagination);
  // console.log(state);
  const table_data = await queryList(pagination);

  state.pagination = pagination;
  state.table_list = table_data
}

const toCreate = () => {

  state.createVisible = true
}
const onFinish = () => {
  console.log("点击搜索");
}
const onFinishFailed = (errorInfo) => { //提交失败 （一般都是校验未通过）
  console.log("搜索失败", errorInfo);
}

const showWindow = (type) => {
  if (type === 'success') {
    message.success('成功的信息！');
  }
  if (type === 'info') {
    message.info('普通的信息！');
  }
  if (type === 'error') {
    message.error('报错的信息！');
  }
  if (type === 'warning') {
    message.warning('警告的信息！');
  }

}

export default defineComponent({
  components: {
    PlusOutlined,
    ExportOutlined,
    ImportOutlined,
    SettingOutlined,
    Create
  },
  setup() {//相当于created
    return {//让响应式数据生效
      state,
      formState,
      columns, //如果基本不会变的常量应该可以不用reactive
      onTableChange,
      toCreate,
      onFinish,
      onFinishFailed,
      showWindow,
    };
  },
});
</script>

<style>
#page {
  width: 100%;
}

.page_header {
  width: 100%;
  display: flex;
}

.search_props {
  width: 87%;
}

.search_operate {
  width: 13%;
  padding-left: 25px;
}

.header_operate {
  margin-bottom: 10px;
}
</style>
